<template>

    <div class="page">
        <div class="top_bar" v-if="slots.topBar">
            <div>
                <slot name="topBar"></slot>
            </div>
            <el-space>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                    <el-button circle icon="Refresh" @click="list.reload()" />
                </el-tooltip>
            </el-space>

        </div>

        <el-table
                  :row-key="list.key"
                  :data = "list.items"
                  :border = "list.border"
                  :size="list.size"
                  v-loading="list.loading"
                  @sort-change="sortChange"
                  @selection-change="selectChange"
                  flexible
        >

            <template v-for="(col,i) in list.columns" :key="i">

                <!--     多选，展开，索引       -->
                <el-table-column v-if="['selection','index', 'expand'].includes(col.type)" :type="col.type"></el-table-column>

                <!--      按钮   -->
                <el-table-column v-else-if="col.type == 'toolbar'" align="center" :label="col.title" fixed="right">
                    <template #default="scope">

                        <mi-line-bar
                            :row="scope.row"
                            :data="col.toolbar"
                        >
                        </mi-line-bar>
                    </template>
                </el-table-column>

                <el-table-column v-else
                                 :prop="col.name"
                                 :label="col.title"
                                 :width="col.width"
                                 :min-width="col.minWidth"
                                 :max-width="col.maxWidth"
                                 :sortable="sortable(col.sort)"
                                 :align="col.align"
                                 :fixed="col.fixed"
                                 :show-overflow-tooltip="col.tooltip===false ? false : true">

                    <template #default="scope">

                        <!--            默认列           -->
                        <span v-if="col.type=='text' || !col.type">{{scope.row[col.name]}}</span>

                        <!--      状态列   -->
                        <mi-switch v-else-if="col.type=='switch'" :model-value="scope.row[col.name]" />

                        <!--      图片列   -->
                        <div v-else-if="col.type=='image'" style="width: 36px; height: 36px;">
                            <mi-image  :src="scope.row[col.name]"></mi-image>
                        </div>

                        <!--     自定义插槽列   -->
                        <slot v-else-if="col.type=='slot'" :name="col.slot" :row="scope.row"></slot>

                    </template>


                </el-table-column>


            </template>

        </el-table>

        <el-pagination v-if="list.isPage"
                       class="mt10"
                       :small="list.size=='small'"
                       background
                       layout="total, sizes, prev, pager, next, slot"
                       :total="list.page.total"
                       v-model:current-page="list.page.currentPage"
                       :page-sizes="list.page.pageSizes"
                       v-model:page-size="list.page.pageSize">
        </el-pagination>
    </div>


</template>

<script setup lang="ts">

import {getCurrentInstance, inject, onBeforeMount, reactive, ref, useSlots, watch} from "vue";

const list: any = inject("list")
const slots = useSlots()

/**
 * 多行选中
 * @param selection
 */
const selectChange = (selection: any) => {
    list.selectKeys = selection.map((item:any) => item[list.key])
}

// 排序改变事件
const sortChange = (val:any) => {
    // 分页列表使用自定义排序，单页列表使用默认排序即可
    if(list.isPage){

        // 转换为后台可识别的排序字段
        list.sort.field = val.prop
        list.sort.order = (val.order = 'ascending') ? 'asc' : 'desc'

        if (list.page.currentPage == 1){
            // 查询数据
            list.getList()
        }else{
            // 将当前页面重置为1
            list.page.currentPage = 1
            // 这里不需要查询数据，系统监听到当前页面变化，会自动查询数据
        }

    }
}

// 是否排序
const sortable = (sort: string|boolean) => {
    if(sort && list.isPage){
        return 'custom'
    }else if(sort){
        return true
    }else{
        return false
    }
}

// 如果是分页，监听分页信息变化
if(list.isPage){
    // 监听当前页数
    watch(
        () => list.page.currentPage,
        (nv, ov) => {
            if (nv != ov){
                console.log("当前页变化")
                list.getList()
            }
        }
    )

    // 监听每页显示数量变化
    watch(
        () => list.page.pageSize,
        (nv, ov) => {
            if(nv != ov){
                if (list.page.currentPage == 1){    // 页面变化会自动重新获取列表数据，如果页面不变，需要手动获取列表数据
                    console.log("每页数量变化查询")
                    list.getList()
                }
                list.page.currentPage = 1
            }
        }
    )
}

onBeforeMount(() => {
    list.getList()
})

</script>

<style scoped>
.page{

}
.top_bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
</style>